<template>
    <div>

        <el-card>

            <el-row :gutter="10">
                <el-col :span="8">
                    <el-input
                            placeholder="请输入内容"
                            v-model="queryInfo.query"
                            clearable
                            @clear="ClearContent"
                    >
                        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="dialogVisible=!dialogVisible">添加</el-button>
                </el-col>
            </el-row>

            <!--用户列表区-->
            <el-table
                    :data="userlist"
                    stripe
                    border
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="role_name"
                        label="角色名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号码"
                        width="150px">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        width="200px">
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="150px">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column
                        label="操作"
                        width="180px"
                >
                    <template slot-scope="scope">
                        <!--                        编辑-->
                        <el-button type="primary" size="mini" icon="el-icon-edit"
                                   @click="editUser(scope.row)"></el-button>
                        <!--                        删除-->
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="deleteUser(scope.row)"></el-button>
                        <!--                      角色分配  -->
                        <el-tooltip :enterable="false" effect="dark" content="角色分配" placement="top">
                            <el-button type="warning" size="mini" icon="el-icon-setting" @click="setRole(scope.row)" ></el-button>
                        </el-tooltip>

                    </template>

                </el-table-column>
            </el-table>

            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1,5, 10, 50]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </el-card>

        <!--用户添加-->
        <el-dialog
                title="用户添加"
                :visible.sync="dialogVisible"
                width="40%"
        >
            <el-form :model="addForm" ref="addForm" label-width="70px">
                <el-form-item label="用户名：" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="手机：" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button @click="resetForm('ruleForm')">重置</el-button>
    <el-button type="primary" @click="submitForm">立即添加</el-button>
  </span>
        </el-dialog>
        <!--        用户修改-->
        <el-dialog
                title="用户修改"
                :visible.sync="editor"
                width="40%"
        >
            <el-form :model="edForm" label-width="70px">
                <el-form-item label="用户名：" prop="username" >
                    <el-input v-model="edForm.username" disabled></el-input >
                </el-form-item>
                <el-form-item label="手机：" prop="mobile">
                    <el-input v-model="edForm.mobile"></el-input>
                </el-form-item>
                <el-form-item label="邮箱：" prop="email">
                    <el-input v-model="edForm.email"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editor = false">取 消</el-button>
                <el-button type="primary" @click="submitUserInfo">立即修改</el-button>
            </span>
        </el-dialog>
<!--权限分配-->
        <el-dialog
                title="权限分配"
                :visible.sync="setRoleDialogVisible"
                width="50%">
            <div >
                <el-row class="right_box">
                    <el-col :span="5">用户名:</el-col>
                    <el-col :span="5"> {{userInfo.username}}</el-col>
                </el-row>
                <el-row class="right_box">
                    <el-col :span="5">用户角色:</el-col>
                    <el-col :span="5">{{userInfo.role_name}}</el-col>
                </el-row>
                <el-row class="right_box">
                    <el-col :span="5">分配角色:</el-col>
                    <el-col :span="5"><el-select v-model="selectedrole" placeholder="请选择">
                        <el-option
                                v-for="item in roleslist"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id">
                        </el-option>
                    </el-select></el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    import {Message} from "element-ui";

    export default {
        name: "users",
        created() {
            this.getUserList()
        },
        data() {
            return {
                //控制对话框的显示与关闭
                dialogVisible: false,
                setRoleDialogVisible:false,
                roleslist:[],
                selectedrole:'',
                edForm: {
                    id: '',
                    email: '',
                    mobile: ""
                },
                editor: false,
                addForm: {
                    username: '',
                    password: '',
                    email: '',
                    mobile: ""
                },
                queryInfo: {
                    query: '',
                    pagenum: 1,
                    pagesize: 5
                },
                userlist: [],
                total: 0,
                //需要分配角色的信息
                userInfo:'',

            }
        },
        methods: {
            //展示分配角色
            async setRole(role){
                this.userInfo=role
                //  获取角色列表
                let {data: res} = await this.$http.get('roles')
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.roleslist=res.data
                this.setRoleDialogVisible=true

            },
            //保存用户角色到服务器
            async saveRoleInfo(){
                if(!this.selectedrole){
                    return this.$message.error('请选择角色')
                }
                let vm =this
                let {data: res} = await this.$http.put(`users/${ vm.userInfo.id}/role`, {rid:vm.selectedrole})
                if (res.meta.status != 200) return Message.error(res.meta.msg)

                Message.success(res.meta.msg)

                this.getUserList()
                this.setRoleDialogVisible=false




            },


            //用户添加
            async submitForm() {
                let {data: res} = await this.$http.post('users', this.addForm)
                if (res.meta.status != 201) return Message.error(res.meta.msg)
                Message.success(res.meta.msg)
                this.getUserList()
                this.dialogVisible = false
               this. addForm= {
                    username: '',
                        password: '',
                        email: '',
                        mobile: ""
                }

            },
            async getUserList() {
                let vm = this
                let {data: res} = await this.$http.get('/users', {params: vm.queryInfo})
                if (res.meta.status != 200) return Message.error(res.meta.msg)
                this.userlist = res.data.users
                this.total = res.data.total

                console.log(res)
            },
            //页数的大小变化
            handleSizeChange(newSize) {
                console.log(newSize)
                this.queryInfo.pagesize = newSize
                this.getUserList()
            },
            //新的页码
            handleCurrentChange(newPage) {
                console.log(newPage)
                this.queryInfo.pagenum = newPage
                this.getUserList()
            },
            //监听状态开关
            async userStateChanged(userInfo) {
                console.log(userInfo)
                let {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`)
                console.log(res)
                if (res.meta.status != 200) {
                    return Message.error(res.meta.msg)
                }
            },
            //用户编辑
            async editUser(userInfo) {
                this.editor = true
                let {data: res} = await this.$http.get('users/' + userInfo.id)
                console.log(res)
                if (res.meta.status != 200) {
                    return Message.error(res.meta.msg)
                }
                this.edForm = {
                    id: userInfo.id,
                    username: res.data.username,
                    email: res.data.email,
                    mobile: res.data.mobile
                }
            },
            //用户编辑提交到服务器
            async submitUserInfo() {
                let userinfo = {
                    email: this.edForm.email,
                    mobile: this.edForm.mobile
                }
                let {data: res} = await this.$http.put('users/' + this.edForm.id, userinfo)
                console.log(res)
                if (res.meta.status != 200) {
                    return Message.error(res.meta.msg)
                }
                this.editor = false
                Message.success(res.meta.msg)
                this.getUserList()
            },
            //删除
            async deleteUser(userInfo) {
                    let vm =this
                 let relust =await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return err
                 })

                console.log(relust)
                if (relust==='confirm'){
                    let {data: res} = await vm.$http.delete(`users/${userInfo.id}`)
                    console.log(res)
                    if (res.meta.status != 200) {
                        return Message.error(res.meta.msg)
                    }
                    Message.success(res.meta.msg)
                    this.getUserList()
                }

            },
            //搜索
            search() {
                this.getUserList()
            },
            //清空
            ClearContent() {
                this.getUserList()
            }
        }
    }
</script>

<style scoped>
.right_box{
    margin: 30px 0;
    display: flex;
    align-items: center;
}
</style>
